<template>
  <div class="app-container" style="width: 100%">
    <SearchForm :searchHandle="searchHandle" />
    <Table
      :loading="tabloading"
      :tableData="tableData"
      :rowHeader="rowHeader"
      :tableOption="tableOption"
      @handleButton="handleButton"
      :pageObj="pageObj"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
    />
    <el-dialog
      :visible="dialogVisible"
      :title="dialogType === 'new' ? '添加用户' : '编辑用户'"
      :close-on-click-modal="false"
      @close="dialogVisible = false"
    >
      <SearchForm
        :rules="Dialogrules"
        class="dialogSearch"
        :label-width="'150px'"
        :inline="true"
        ref="searchForm"
        :searchForm="DialogForm"
        :searchData="DialogData"
        :search-handle="dialogHandle"
        @goback="goback"
      />
    </el-dialog>
  </div>
</template>

<script>
import SearchForm from "@/components/searchForm/index.vue";
import Table from "@/components/Table/baseTable";
import { UserQuery, AddUser, DelUser } from "@/api/mange.js";
import { Task } from "@/api/task.js";

export default {
  name: "DirectivePermission",
  components: {
    SearchForm,
    Table,
  },
  data() {
    const validateTel = (rule, value, callback) => {
      const regxTel = /^1[3|4|5|7|8][0-9]{9}$/;
      if (value == "") {
        callback(new Error("请输入手机号"));
      } else if (!regxTel.test(value)) {
        value = "";
        callback(new Error("请输入正确手机号"));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      dialogType: "new",
      tableData: [],
      tabloading: false,
      rowHeader: [
        {
          label: "姓名",
          prop: "name",
        },
        {
          label: "用户名",
          prop: "userName",
        },
        {
          label: "账户类型",
          prop: "roleType",
        },
        {
          label: "电话",
          prop: "phone",
        },
        {
          label: "电子邮箱",
          prop: "email",
        },
        {
          label: "负责项目",
          prop: "projectName",
          render: (scope) => {
            return scope.projectName.join(",");
          },
        },
        {
          label: "登录次数",
          prop: "loginCount",
        },
        {
          label: "最后登陆时间",
          prop: "lastLoginTime",
        },
      ],
      tableOption: {
        label: "操作",
        width: "340px",
        options: [
          {
            persstion: "",
            methods: "edit",
            label: "编辑",
            type: "primary",
          },
          {
            persstion: "",
            label: "删除",
            methods: "delete",
            type: "danger",
          },
        ],
      },
      pageObj: {
        total: 10,
        size: 10,
        sizes: [10, 30, 50, 100],
        currentPage: 1,
      },

      searchHandle: [
        {
          type: "primary",
          label: "添加",
          persstion: "",
          handle: () => {
            this.dialogVisible = true;
            this.dialogType = "new";
            this.DialogData = {
              name: "",
              userName: "",
              roleId: "",
              phone: "",
              email: "",
              password: "",
            };
          },
        },
      ],
      DialogData: {
        name: "",
        userName: "",
        roleId: "",
        phone: "",
        email: "",
        password: "",
        relationProjectId: "",
      },
      DialogForm: [
        {
          label: "姓名:",
          type: "Input",
          prop: "name",
          class: "nameInp",
          placeholder: "请输入姓名",
          clearable: true,
          clear: () => {},
          InputWidth: "width:100%",
          maxlength: 8,
        },
        {
          label: "用户名:",
          type: "Input",
          prop: "userName",
          class: "useNameInp",
          placeholder: "请输入用户名",
          clearable: true,
          clear: () => {},
          required: true,
          InputWidth: "width:100%",
          maxlength: 8,
        },
        {
          label: "账户类型:",
          type: "Select",
          prop: "roleId",
          placeholder: "请输入账户类型",
          clearable: true,
          clear: () => {},
          change: (val) => {},
          required: true,
          InputWidth: "width:100%",
          options: [
            {
              label: "管理员",
              value: 1,
            },
            {
              label: "开发者",
              value: 2,
            },
            {
              label: "测试工程师",
              value: 3,
            },
          ],
        },
        {
          label: "电话:",
          type: "Input",
          prop: "phone",
          class: "phoneInp",
          placeholder: "请输入电话",
          clearable: true,
          clear: () => {},
          required: true,
          InputWidth: "width:100%",
          maxlength: 8,
        },
        {
          label: "电子邮箱:",
          type: "Input",
          prop: "email",
          class: "emailInp",
          placeholder: "请输入电子邮箱",
          clearable: true,
          clear: () => {},
          InputWidth: "width:100%",
          maxlength: 8,
        },
        {
          label: "密码:",
          type: "Input",
          prop: "password",
          class: "passwordInp",
          placeholder: "请输入密码",
          clearable: true,
          clear: () => {},
          required: true,
          InputWidth: "width:100%",
          maxlength: 8,
        },
        {
          label: "项目权限:",
          type: "Select",
          prop: "relationProjectId",
          class: "relationProjectId",
          clearable: true,
          multiple: true,
          options: [
            {
              label: "shanghai",
              value: 1,
            },
            {
              label: "beijing",
              value: 2,
            },
          ],
          clear: () => {},
          change: (val) => {},
          InputWidth: "width:100%",
        },
      ],
      Dialogrules: {
        userName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            trigger: "blur",
            validator: validateTel,
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        email: [
          {
            message: "请输入正确的邮箱",
            trigger: "blur",
          },
        ],
      },
      dialogHandle: [
        {
          type: "primary",
          label: "确定",
          handle: (item) => {
            this.dialogVisible = false;
            if (this.dialogType == "new") {
              AddUser(this.DialogData).then((res) => {
                this.$message({
                  type: "success",
                  message: "添加成功!",
                });
                this.userQuery();
              });
            } else if (this.dialogType == "edit") {
              AddUser(this.DialogData).then((res) => {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.userQuery();
              });
            }
          },
        },
        {
          type: "primary",
          label: "关闭",
          handle: () => {
            this.dialogVisible = false;
          },
        },
      ],
    };
  },
  mounted() {
    this.userQuery();
    this.queryTask();
  },
  methods: {
    queryTask() {
      this.DialogForm[6].options = [];
      Task({}).then((res) => {
        if (res.code == "200") {
          res.result.map((item) => {
            this.DialogForm[6].options.push({
              label: item.projectName,
              value: item.id,
            });
          });
        }
      });
    },
    goback(item) {
      this.dialogVisible = false;
    },
    userQuery() {
      UserQuery({}).then((res) => {
        this.tableData = res.result;
      });
    },
    handleCurrentChange(val) {
      this.pageObj.currentPage = val;
      this.userQuery();
    },
    handleSizeChange(val) {
      this.pageObj.currentPage = 1;
      this.pageObj.size = val;
      this.userQuery();
    },
    handleButton(methods, data, row, index) {
      if (methods == "edit") {
        this.dialogVisible = true;
        this.dialogType = "edit";
        this.DialogData = row;
      } else if (methods == "delete") {
        this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-custom-cancel",
          type: "warning",
        })
          .then(() => {
            DelUser({
              id: row.id,
            }).then((res) => {
              this.userQuery();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else if (methods == "Reset") {
      }
    },
  },
};
</script>

<style lang="scss">
.app-container {
  .el-table__fixed-body-wrapper {
    height: 1000px;
  }
  .nameInp {
    .el-form-item__content {
      width: 73%;
    }
  }
  .useNameInp {
    .el-form-item__content {
      width: 73%;
    }
  }
  .adminInp {
    .el-form-item__content {
      width: 73%;
      .el-select {
        width: 100%;
      }
    }
  }
  .phoneInp {
    .el-form-item__content {
      width: 73%;
    }
  }
  .emailInp {
    .el-form-item__content {
      width: 73%;
    }
  }
  .passwordInp {
    .el-form-item__content {
      width: 73%;
    }
  }
  .dialogSearch {
    border: none;
    .InlineBlock {
      display: flex;
      justify-content: end;
      margin-right: 8%;
    }
  }
}
</style>

